<template>
  <div class="newPartner">
    <div class="newPartner_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">添加合作商<i class="el-icon-close"></i></div>
    </div>
    <!-- 商家类型与返回 -->
    <div class="newPartner_type">
      <div>装饰公司列表/<span>新增装饰公司</span></div>
      <el-button @click="backList" type="success">返回</el-button>
    </div>

    <!-- 新增商家信息 -->
    <div class="newPartner_info">
      <!-- 头部nav -->
      <div class="newPartner_nav">
        <div
          class="newPartner_navItem"
          :class="{ navItem_active: !navStatus }"
          @click="needInfo"
        >
          基础信息
          <div class="navBorder" v-if="!navStatus"></div>
        </div>
        <div
          class="newPartner_navItem"
          :class="{ navItem_active: navStatus }"
          @click="otherFile"
        >
          附件上传
          <div class="navBorder" v-if="navStatus"></div>
        </div>
      </div>
      <!-- 基础信息 -->
      <div class="newPartner_needInfo" v-if="!navStatus">
        <div class="newPartner_info">
          <div class="newPartner_info_box">
            <form action="#" class="form">
              <div class="form_left">
                <ul>
                  <li>
                    <span>联系人</span><input type="text" v-model="form.name" />
                  </li>
                  <li>
                    <span>邮箱</span><input type="text" v-model="form.mail" />
                  </li>
                  <li>
                    <span>店铺名称</span
                    ><input type="text"  maxlength="12" v-model="form.title" />
                  </li>
                </ul>
              </div>
              <div class="form_right">
                <ul>
                    <li><span>手机号</span><input type="text" v-model="form.mobile"></li>
                    <li><span>店铺地址</span><input type="text" ></li>
                </ul> 
              </div>
            </form>
          </div>
        </div>
        <!-- 店铺图片-->
        <div class="shopRoom_img">
          <!-- 店铺logo -->
          <div class="shopRoom_logo">
            <span>店铺logo</span>
            <div class="uploadImg" v-if="logo==''" v-loading="loadingLogo" element-loading-text="图片上传中" element-loading-background="rgba(0, 0, 0, 0.5)">
              <input
                type="file"
                accept="image/png, image/jpeg, image/gif, image/jpg"
                @change="toUploadLogo"
              />
              <div class="fileImg">
                <i class="el-icon-plus"></i>
              </div>
            </div>
            <div v-else class="logoShadow">
                <img :src="logo" alt="">
                <div class="deleteShadow">
                  <i class="el-icon-delete" @click="deleLogo"></i>
                </div>
            </div>
          </div>
          <!-- 店铺背景 -->
          <div class="shopRoom_bg">
            <span>店铺背景图</span>
            <div class="uploadImg" v-if="back_img==''" v-loading="loadingBg" element-loading-text="图片上传中" element-loading-background="rgba(0, 0, 0, 0.5)">
              <input
                type="file"
                accept="image/png, image/jpeg, image/gif, image/jpg"
                @change="toUploadBg"
              />
              <div class="fileImg">
                <i class="el-icon-plus"></i>
              </div>
            </div>
            <div v-else class="logoShadow">
                <img :src="back_img" alt="">
                <div class="deleteShadow">
                  <i class="el-icon-delete" @click="deleBackImg"></i>
                </div>
            </div>
          </div>
        </div>

        <!-- 店铺简介 -->
        <!-- <div class="shopRoom_brief">
          <span>个性签名</span>
          <el-input
            type="textarea"
            maxlength="100"
            v-model="form.detail"
            rows="5"
            placeholder="店铺简介 "
            class="resizeNone"
          ></el-input>
        </div> -->
        <div class="nextBtn">
          <button @click="nextBtn">下一步</button>
        </div>
      </div>

      <!-- 附件上传 -->
      <div class="newPartner_otherFile" v-else>
        <div class="cardImg">
            <span>法人身份证</span>
            <div class="cardImg_positive">
                <div v-if="id_card_top==''" class="imgWrap" v-loading="loadingTop" element-loading-text="图片上传中" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <input
                    type="file"
                    accept="image/png, image/jpeg, image/gif, image/jpg"
                    @change="toUploadCardT"
                    />
                    <div class="upTit">
                    <i class="el-icon-plus"></i>
                    身份证正面
                    </div>
                </div>
                <div v-else class="imgWrap">
                    <img :src="id_card_top" alt="">
                    <div class="shadowImg">
                      <i @click="delCardTop" class="el-icon-delete"></i>
                    </div>
                </div>
             </div>
            <div class="cardImg_positive">
                <div v-if="id_card_back==''" class="imgWrap" v-loading="loadingBack" element-loading-text="图片上传中" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <input
                    type="file"
                    accept="image/png, image/jpeg, image/gif, image/jpg"
                    @change="toUploadCardB"
                    />
                    <div class="upTit">
                    <i class="el-icon-plus"></i>
                    身份证反面
                    </div>
                </div>
                <div v-else class="imgWrap">
                    <img :src="id_card_back" alt="">
                    <div class="shadowImg">
                      <i @click="delCardBack" class="el-icon-delete"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="license">
          <span>营业执照</span>
          <div class="cardImg_positive">
                <div v-if="license==''" class="imgWrap" v-loading="loadingLicense" element-loading-text="图片上传中" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <input
                    type="file"
                    accept="image/png, image/jpeg, image/gif, image/jpg"
                    @change="toUploadL"
                    />
                    <div class="upTit">
                    <i class="el-icon-plus"></i>
                    营业执照
                    </div>
                </div>
                <div v-else class="imgWrap">
                    <img :src="license" alt="">
                    <div class="shadowImg">
                      <i @click="delLicense" class="el-icon-delete"></i>
                    </div>
                </div>
          </div>
        </div>

        <!-- 提交按钮 -->
        <div class="submitBtn">
          <button @click="stepFn">上一步</button>
          <button @click="toAddShop">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navStatus: false, //点击基础信息或附件上传
      logo: "",
      back_img: "",
      id_card_top: "",
      id_card_back: "",
      license: "",
      loadingLogo:false,
      loadingBg:false,
      loadingTop:false,
      loadingBack:false,
      loadingLicense:false,
      form: {
        user_id: null,
        role: "designer",
        name: "", //联系人
        mail: "", //邮箱
        title: "", //店铺名称
        // partner_phone:'',  //手机号
        // partner_address:'',  //店铺地址
        mobile: "",
        logo: "",
        id_card_top: "", //身份证正面
        id_card_back: "", //身份证反面
        // detail: "", //店铺简介
        back_img: "", //背景图
        license: "" //营业执照
      }
    };
  },
  mounted() {
    let user_id = localStorage.getItem("user_id");
    this.form.user_id = Number(user_id);
  },

  methods: {
    // 上传logo
    toUploadLogo(event) {
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.loadingLogo = true
      let form = new FormData();
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then(res => {
            console.log(res);
            if (res.code == 1) {
              this.logo = res.data.url;
              this.form.logo = res.data.id;
              this.$message({
                type: "success",
                message: "上传成功"
              });
              this.loadingLogo = false
            }
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
            this.loadingLogo = false
          });
    },

    // 上传背景图
    toUploadBg(event) {
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.loadingBg = true
      let form = new FormData();
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then(res => {
            console.log(res);
            if (res.code == 1) {
              this.back_img = res.data.url;
              this.form.back_img = res.data.id;
              this.$message({
                type: "success",
                message: "上传成功"
              });
              this.loadingBg = false
            }
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
            this.loadingBg = false
          });
    },

    // 上传身份证正面
    toUploadCardT(event) {
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.loadingTop = true
      let form = new FormData();
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then(res => {
            console.log(res);
            if (res.code == 1) {
              this.id_card_top = res.data.url;
              this.form.id_card_top = res.data.id;
              this.$message({
                type: "success",
                message: "上传成功"
              });
              this.loadingTop = false
            }
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
            this.loadingTop = false
          });
    },

    // 上传身份证反面
    toUploadCardB(event) {
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.loadingBack = true
      let form = new FormData();
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then(res => {
            console.log(res);
            if (res.code == 1) {
              this.id_card_back = res.data.url;
              this.form.id_card_back = res.data.id;
              this.$message({
                type: "success",
                message: "上传成功"
              });
              this.loadingBack = false
            }
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
            this.loadingBack = false
          });
    },

    //上传营业执照
    toUploadL(event) {
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.loadingLicense = true
      let form = new FormData();
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then(res => {
            console.log(res);
            if (res.code == 1) {
              this.license = res.data.url;
              this.form.license = res.data.id;
              this.$message({
                type: "success",
                message: "上传成功"
              });
              this.loadingLicense = false
            }
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
            this.loadingLicense = false
          });
    },

    // 点击logo的删除
    deleLogo() {
      this.form.logo = "";
      this.logo = "";
    },

    // 点击bg的删除
    deleBackImg() {
      this.form.back_img = "";
      this.back_img = "";
    },

    //点击删除身份证正面
    delCardTop() {
      (this.form.id_card_top = ""), (this.id_card_top = "");
    },
    //点击删除身份证反面
    delCardBack() {
      (this.form.id_card_back = ""), (this.id_card_back = "");
    },
    //点击删除营业执照
    delLicense() {
      (this.form.license = ""), (this.license = "");
    },

    // 点击返回到列表
    backList() {
      this.$router.back(1);
    },

    //点击基础信息
    needInfo() {
      this.navStatus = false;
    },

    // 点击下一步
    nextBtn() {
      this.navStatus = true;
    },

    //点击上一步
    stepFn() {
      this.navStatus = false;
    },

    // 点击附件选项
    otherFile() {
      this.navStatus = true;
    },

    // 点击提交按钮
    toAddShop() {
      if(this.form.title==''){
        this.$message.warning('请填写店铺名称')
        return 
      }else if(this.form.mobile==''){
        this.$message.warning('请填写手机号码')
        return 
      }else if(this.form.name==''){
        this.$message.warning('请填写联系人')
        return 
      }
      this.$http.post("/api/root/Partner/newPartner", this.form).then(res => {
        if (res.code == 1) {
          this.$router.push({ name: "decorationList", params: {} });
          this.$message({
            type: "success",
            message: "添加成功"
          });
        } else {
          this.$message({
            type: "error",
            message: res.msg
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import "newDecoration.less";
</style>
